<template>
    <div><h1>数据统计</h1>
    <div class="data-view">
        <el-card>
            <div id="nodeCount" v-loading = "loading"></div>
        </el-card>
        <el-card>
            <div id="relationCount" v-loading = "loading"></div>
        </el-card>
    </div>
    </div>
</template>

<script>
import {statistic} from '../../api/api.js'
export default {
     data() {
            return {
                loading:true
            }
        },
        methods:{
            getStatistic(){
      const nodeLabels = ['中药材','中药组方','化合物','靶点','来源植物名','疾病']
      const relationLabels = ['方剂组成','靶点对应疾病','化合物对应靶点','药材组分','药材来源植物名']
      statistic(nodeLabels,relationLabels).then(response =>{
        this.nodeCountList = response.data['nodes_count']
        this.relationCountList = response.data['relations_count']

        const nodeCount = []
        const relationCount = []
        for(let i = 0; i < this.nodeCountList.length; i ++) {
          nodeCount.push(this.nodeCountList[i][nodeLabels[i]])
        }
        for(let j = 0; j < this.relationCountList.length; j ++) {
          var kv = {}
          kv.value = this.relationCountList[j][relationLabels[j]]
          kv.name = relationLabels[j]
          relationCount.push(kv)
        }

        let mychart1 = this.$echarts.init(document.getElementById('nodeCount'))
        let mychart2 = this.$echarts.init(document.getElementById('relationCount'))
        let option1 = {
          title: {
            text: '结点类型',
            textStyle: {
              color: 'black'
            }
          },
          tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          textStyle: {
          color: 'black'
          },
          xAxis: [
            {
              type: 'category',
              data: nodeLabels,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
              interval: 0
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              barWidth: '60%',
              data: nodeCount,
              itemStyle: {
                color: function(params) {
                  var colors = ['#EE8484', '#73C0DE', '#5470C6', '#91CC75', '#FAC858','#9A60B4'];
                  return colors[params.dataIndex];
                }
              },
            }
          ]
        };
        let option2 = {
          title: {
            text: '结点关系', 
            textStyle: {
              color: 'black'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '10%',
            bottom: '10%',
            left: 'center',
            textStyle: {
            color: 'black'
          },
        },
            series: [
              {
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                labelLine: {
                  show: false
                },
                data: relationCount
              }
            ]
    };
        mychart1.setOption(option1)
        mychart2.setOption(option2)
        this.loading=false  
        console.log("nodeCountList:",this.nodeCountList)
        console.log("relationCountList:",this.relationCountList)
      }).catch(error =>{
        console.log('testStatisticError,',error)
      })
    }
        },
        mounted() {
            this.getStatistic()
        }
}
</script>

<style lang="scss">
    .data-view {
       #nodeCount {
    margin-left: 50px;
    height: 450px;
    width: 400px;
    float: left;
    // border: 1px solid black;
    // border-radius: 10px;
  }
  #relationCount {
    // border: 1px solid black;
    // border-radius: 10px;
    margin-left: 50px;
    // float: right;
    height: 450px;
    width: 400px;
  }
    }
</style>